<template>
    <div>
        <a-modal
            :title="modalTitle"
            v-model="modalShow"
            @ok="onSubmit"
            :width="1200"
            okText="确定"
            cancelText="取消"
        >
            <div class="content">
                <div class="buttons">
                    <a-row style="margin-bottom: 10px;">
                        <a-col :span="12"></a-col>
                        <a-col :span="12" class="a-col-custom">
                            <div class="lines-row" v-show="!displayAll">
                                <a-input-search
                                    v-model="queryParams.data.matchParam"
                                    placeholder="编码/项目名称"
                                    @search="handleSearch"
                                    enterButton
                                />
                            </div>
                            <div class="lines-row">
                                <a @click="advanceSearchShowClk" class="queryText">
                                    高级搜索
                                    <a-icon :type="displayAll ? 'up' : 'down'" />
                                </a>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <!-- 高级搜索展开条件表单 -->
                <div class="query-content" :style="{ display: displayAll ? 'block' : 'none' }">
                    <a-form :form="queryParams.data" @submit="handleSearch" hideRequiredMark>
                        <div class="row-container">
                            <a-form-item label="项目编码">
                                <a-input v-model="queryParams.data.code" />
                            </a-form-item>
                            <a-form-item label="项目名称">
                                <a-input v-model="queryParams.data.name" />
                            </a-form-item>
                            <a-form-item label="是否数值">
                                <a-select v-model="queryParams.data.dataType">
                                    <a-select-option
                                        v-for="option in dict.dataTypeOptions"
                                        :key="option.code"
                                        :value="option.code"
                                    >{{ option.label }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </div>
                        <a-row :gutter="16">
                            <a-col :span="24" :style="{ textAlign: 'right' }">
                                <a-button
                                    type="primary"
                                    @click="handleSearch"
                                >{{ $t("common.search") }}</a-button>
                                <a-button
                                    :style="{ marginLeft: '8px' }"
                                    @click="handleReset"
                                >{{ $t("common.reset") }}</a-button>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <a-table
                    :columns="columns"
                    :dataSource="dataSource"
                    :rowKey="record => record.id"
                    :loading="loading"
                    :pagination="false"
                    :customRow="handleSelectTable"
                    :rowClassName="changeRowClassName"
                >
                    <template slot="index" slot-scope="text, record, index">
                        <span>{{ queryParams.pageSize * (queryParams.pageNum - 1) + index + 1 }}</span>
                    </template>
                    <template slot="dataType" slot-scope="text,record">
                        <a-tag
                            :color="dict.dataTypeOptions[record.dataType].color"
                        >{{ dict.dataTypeOptions[record.dataType].label }}</a-tag>
                    </template>
                    <template slot="dataSource" slot-scope="text,record">
                        <a-tag
                            :color="dict.dataSourceOptions[record.dataSource].color"
                        >{{ dict.dataSourceOptions[record.dataSource].label }}</a-tag>
                    </template>
                </a-table>
                <div style="margin-top: 10px; float: right;">
                    <LibsPagination
                        :pageNum="pageNum"
                        :pageSize="pageSize"
                        :total="total"
                        :current="current"
                        @currentPageChange="currentPageChange"
                        @pageSizeChange="pageSizeChange"
                    ></LibsPagination>
                </div>
                <div style="clear:both"></div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import "@/assets/query.css";
import dict from "../../views/dict.json";
import Bus from "../../utils/Bus";
import { mapState } from "vuex";
import LibsCommonBasics from "libs-common-basics";

const columns = [
    {
        title: "序号",
        dataIndex: "index",
        scopedSlots: { customRender: "index" },
        width: 90,
        align: "center",
    },
    {
        title: "项目编码",
        dataIndex: "code",
        width: 100,
    },
    {
        title: "项目名称",
        dataIndex: "name",
        width: 100,
    },
    {
        title: "单位",
        dataIndex: "measureUnit",
        width: 100,
    },
    {
        title: "是否数值",
        dataIndex: "dataType",
        width: 100,
        scopedSlots: { customRender: "dataType" },
    },
    {
        title: "来源",
        dataIndex: "dataSource",
        width: 100,
        scopedSlots: { customRender: "dataSource" },
    },
];

export default {
    data() {
        return {
            modalShow: false,
            modalTitle: "检验项目",
            displayAll: false,
            dict,
            columns,
            queryParams: {
                data: {},
                pageNum: parseInt(LibsCommonBasics.LibsPagination.props.pageNum.default),
                pageSize: parseInt(LibsCommonBasics.LibsPagination.props.pageSize.default),
            },
        };
    },
    methods: {
        // 切换页码
        currentPageChange({ current }) {
            let self = this;
            self.$store.state.QCItem.loading = true;
            self.$store.state.QCItem.pager.pageNum = current;
            self.queryParams.pageNum = current;
            this.init();
        },
        // 切换当前页记录数
        pageSizeChange({ pageSize }) {
            let self = this;
            self.$store.state.QCItem.loading = true;
            self.$store.state.QCItem.pager.pageNum = 1;
            self.$store.state.QCItem.pager.pageSize = pageSize;
            self.queryParams.pageNum = 1;
            self.queryParams.pageSize = pageSize;
            this.init();
        },
        //高级搜索开关
        advanceSearchShowClk() {
            this.displayAll = !this.displayAll;
        },
        //重置查询表单
        handleReset() {
            this.queryparams.data = {};
        },
        // 打开窗口
        openModal() {
            this.modalShow = true;
            this.init();
        },
        // 确定提交表单
        onSubmit() {
            let item = this.dataSource[this.activeIndex];
            Bus.$emit("project", item);
            this.modalShow = false;
            self.activeIndex = -1;
        },
        //查询
        handleSearch(e) {
            let self = this;
            self.queryParams.pageNum = parseInt(LibsCommonBasics.LibsPagination.props.pageNum.default);
            self.$store.state.QCItem.loading = true;
            self.init();
        },
        // 自定义点击行事件
        handleSelectTable(record, index) {
            let self = this;
            return {
                on: {
                    click: () => {
                        self.activeIndex === index ? (self.activeIndex = -1) : (self.activeIndex = index);
                        self.$forceUpdate();
                    },
                },
            };
        },
        changeRowClassName(record, index) {
            //record代表表格行的内容，index代表行索引
            //判断索引相等时添加行的高亮样式
            return index === this.activeIndex ? "clickTableRow" : "";
        },
        init() {
            this.$store.dispatch(dict.action.project.queryAction, this.queryParams);
        },
    },
    computed: {
        ...mapState({
            loading: state => state.QCItem.loading, // 列表数据加载状态
            dataSource: state => state.QCItem.dataSource,
            // 分页监听
            pageNum: state => parseInt(state.QCItem.pager.pageNum),
            pageSize: state => parseInt(state.QCItem.pager.pageSize),
            total: state => parseInt(state.QCItem.pager.total),
            current: state => parseInt(state.QCItem.pager.current),
        }),
    },
};
</script>
